<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #hd{
            width: 800px;
            height: 500px;
            background: purple;
        }
    </style>
</head>
<body>

<img src="https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/08/ChMkJ1o3VEeIMCSKAAFATYxe9n8AAjQwAENAO0AAUBl349.jpg" id="pic1">

<img src="https://desk-fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/02/09/ChMkJ1bKzgaITJ6eACPQL8MBCl8AALJGwCMRWQAI9BH620.jpg" id="pic2">


<div id="hd"></div>


<script>

    var pic1 = document.getElementById('pic1');
    var pic2 = document.getElementById('pic2');
    var hd = document.getElementById('hd');

    // 获得hd元素距离页面顶部的距离
    // alert(hd.offsetTop);

    // pic1.onload = ()=>{
    //     pic2.onload = ()=>{
    //         alert(hd.offsetTop);
    //     }
    // }

    let p1 = new Promise((resolve,reject)=>{
        pic1.onload = resolve;
    })

    let p2 = new Promise((resolve, reject)=>{
        pic2.onload = ()=>{
            resolve();
        }
    })

    let p = Promise.all([p1,p2]);
    // p.then会等all方法里的p1和p2都处于完成状态后，才会执行
    p.then(()=>{
        alert(hd.offsetTop);
    })





</script>



</body>
</html>